<%@ page import="java.util.List" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>首页数据统计 - 网吧管理系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <aside class="lyear-layout-sidebar">
            <div id="logo" class="sidebar-header">
                <a href="index.jsp"><img src="images/logo-sidebar.png" alt="网吧管理系统" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item active"><a href="StatisticsServlet"><i class="mdi mdi-home"></i> 后台首页</a></li>
                        <li class="nav-item"><a href="ComputerServlet?action=list"><i class="mdi mdi-laptop"></i> 电脑管理</a></li>
                        <li class="nav-item"><a href="OrderServlet?action=list"><i class="mdi mdi-cart"></i> 订单管理</a></li>
                        <li class="nav-item"><a href="SessionServlet?action=list"><i class="mdi mdi-timer"></i> 上机管理</a></li>
                        <li class="nav-item"><a href="UserServlet?action=list"><i class="mdi mdi-account"></i> 用户管理</a></li>
                    </ul>
                </nav>
            </div>
        </aside>

        <header class="lyear-layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title">网吧管理系统</span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="用户头像" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="change_password.jsp"><i class="mdi mdi-lock-outline"></i> 修改密码</a></li>
                                <li><a href="logout.jsp"><i class="mdi mdi-logout-variant"></i> 退出登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <main class="lyear-layout-content">
            <div class="container-fluid">
                <h2>网吧运营数据</h2>
                <div class="row">
                    <div class="col-md-6">
                        <h4>每日订单量</h4>
                        <canvas id="orderChart"></canvas>
                    </div>
                    <div class="col-md-6">
                        <h4>每日收入</h4>
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>

                <h3>用户统计</h3>
                <p>总用户数: <%= request.getAttribute("totalUsers") != null ? request.getAttribute("totalUsers") : 0 %></p>
                <p>新注册用户数 (本月): <%= request.getAttribute("newUsers") != null ? request.getAttribute("newUsers") : 0 %></p>

                <h3>电脑使用统计</h3>
                <p>总使用时长:
                    <%= request.getAttribute("totalHours") != null ? String.format("%.2f", Double.parseDouble(request.getAttribute("totalHours").toString())) : "0.00" %> 小时
                </p>
                <p>高峰使用时段: <%= request.getAttribute("peakTime") != null ? request.getAttribute("peakTime") : "暂无数据" %></p>
            </div>
        </main>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.min.js"></script>

<script>
    // 倒序输出 orderLabels 和 orderData
    var orderLabels = [<%
    if (request.getAttribute("orderLabels") != null) {
        List<String> orderLabels = (List<String>) request.getAttribute("orderLabels");
        for (int i = orderLabels.size() - 1; i >= 0; i--) {
            out.print("\"" + orderLabels.get(i) + "\"");
            if (i > 0) {
                out.print(", ");
            }
        }
    }
%>];

    var orderData = [<%
    if (request.getAttribute("orderData") != null) {
        List<Integer> orderData = (List<Integer>) request.getAttribute("orderData");
        for (int i = orderData.size() - 1; i >= 0; i--) { // 倒序输出
            out.print(orderData.get(i));
            if (i > 0) {
                out.print(", ");
            }
        }
    }
%>];

    // 倒序输出 revenueLabels 和 revenueData
    var revenueLabels = [<%
    if (request.getAttribute("revenueLabels") != null) {
        List<String> revenueLabels = (List<String>) request.getAttribute("revenueLabels");
        for (int i = revenueLabels.size() - 1; i >= 0; i--) {
            out.print("\"" + revenueLabels.get(i) + "\"");
            if (i > 0) {
                out.print(", ");
            }
        }
    }
%>];

    var revenueData = [<%
    if (request.getAttribute("revenueData") != null) {
        List<Double> revenueData = (List<Double>) request.getAttribute("revenueData");
        for (int i = revenueData.size() - 1; i >= 0; i--) { // 倒序输出
            out.print(revenueData.get(i));
            if (i > 0) {
                out.print(", ");
            }
        }
    }
%>];

    // 订单量图表
    var orderChartCtx = document.getElementById('orderChart').getContext('2d');
    var orderChart = new Chart(orderChartCtx, {
        type: 'line',
        data: {
            labels: orderLabels, // 使用倒序后的日期作为标签
            datasets: [{
                label: '每日订单量',
                data: orderData, // 倒序后的每日订单数据
                borderColor: 'rgba(75, 192, 192, 1)',
                fill: false
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 收入图表
    var revenueChartCtx = document.getElementById('revenueChart').getContext('2d');
    var revenueChart = new Chart(revenueChartCtx, {
        type: 'bar',
        data: {
            labels: revenueLabels, // 使用倒序后的日期作为标签
            datasets: [{
                label: '每日收入 (元)',
                data: revenueData, // 倒序后的每日收入数据
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>



</body>
</html>
